<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="mt-4 p-5 bg-info text-white rounded">
        <h1>徽章 进度条 列表</h1>
    </div>
    <div class="container">
        <h2>您有未读信息<span class="badge bg-secondary">!!!</span></h2>
        <h3>您有未读信息<span class="badge bg-secondary">!!!</span></h3>
        <h4>您有未读信息<span class="badge bg-secondary">!!!</span></h4>
        <p>不同颜色的徽章</p>
        <span class="badge bg-primary">主要</span>
        <span class="badge bg-secondary">次要</span>
        <span class="badge bg-success">成功</span>
        <span class="badge bg-danger">危险</span>
        <span class="badge bg-warning">警告</span>
        <span class="badge bg-info">信息</span>
        <span class="badge bg-light">浅色</span>
        <span class="badge bg-dark">深色</span>
        <p>椭圆 药丸状 徽章</p>
        <span class="badge rounded-pill bg-primary">主要</span>
        <span class="badge rounded-pill bg-secondary">次要</span>
        <span class="badge rounded-pill bg-success">成功</span>
        <span class="badge rounded-pill bg-danger">危险</span>
        <span class="badge rounded-pill bg-warning">警告</span>
        <span class="badge rounded-pill bg-info">信息</span>
        <span class="badge rounded-pill bg-light">浅色</span>
        <span class="badge rounded-pill bg-dark">深色</span>
        <div class="mt-3">
            <p>嵌入按钮或其他元素内的徽章</p>
            <button type="button" class="btn btn-danger">删除 <span class="badge bg-dark">警告</span></button>
            <button type="button" class="btn btn-primary">编辑 <span class="badge bg-warning">!!!</span></button>
        </div>

        <div class="mt-3 p-3">
            <p>进度条</p>
            <div class="progress mt-3">
                <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="25" aria-valuemin="0"
                    aria-valuemax="100">60%</div>
            </div>
            <p>不同颜色的进度条</p>
            <div class="progress mt-3" style="height: 25px;">
                <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="25"
                    aria-valuemin="0" aria-valuemax="100">60%</div>
            </div>
            <p>带条纹的进度条</p>
            <div class="progress mt-3" style="height: 35px;">
                <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 60%;"
                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">60%</div>
            </div>
            <p>带动画的进度条--需条纹</p>
            <div class="progress mt-3" style="height: 35px;">
                <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar"
                    style="width: 60%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">60%</div>
            </div>
            <p>混合色彩进度条</p>
            <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 25%;">25%</div>
                <div class="progress-bar bg-info" role="progressbar" style="width: 40%;">40%</div>
                <div class="progress-bar bg-success" role="progressbar" style="width: 10%;">10%</div>
            </div>
        </div>

        <div>
            <p>加载效果 多颜色</p>
            <div class="spinner-border text-muted"></div>
            <div class="spinner-border text-primary"></div>
            <div class="spinner-border text-success"></div>
            <div class="spinner-border text-info"></div>
            <div class="spinner-border text-warning"></div>
            <div class="spinner-border text-danger"></div>
            <div class="spinner-border text-secondary"></div>
            <div class="spinner-border text-dark"></div>
            <div class="spinner-border text-light"></div>
            <p>闪烁加载</p>
            <div class="spinner-grow text-muted"></div>
            <div class="spinner-grow text-primary"></div>
            <div class="spinner-grow text-success"></div>
            <div class="spinner-grow text-info"></div>
            <div class="spinner-grow text-warning"></div>
            <div class="spinner-grow text-danger"></div>
            <div class="spinner-grow text-secondary"></div>
            <div class="spinner-grow text-dark"></div>
            <div class="spinner-grow text-light"></div>
            <p>加载按钮</p>
            <button type="button" class="btn btn-primary">
                <span class="spinner-border spinner-border-sm text-danger"></span>
                加载中...
            </button>
        </div>

        <div>
            <p>分页</p>
            <ul class="pagination">
                <li class="page-item"><a href="#" class="page-link">Previous</a></li>
                <li class="page-item"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item active"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#" class="page-link">Next</a></li>
            </ul>
            <p>第一页或最后一页 前一页和后一页变禁用状态</p>
            <ul class="pagination">
                <li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
                <li class="page-item active"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item "><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#" class="page-link">Next</a></li>
            </ul>

            <p>分页设置大小 与 对齐方式</p>
            <p>大分页 左对齐（默认）</p>
            <ul class="pagination pagination-lg">
                <li class="page-item"><a href="#" class="page-link">Previous</a></li>
                <li class="page-item"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item active"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#" class="page-link">Next</a></li>
            </ul>
            <p>默认分页 居中对齐</p>
            <ul class="pagination justify-content-center">
                <li class="page-item"><a href="#" class="page-link">Previous</a></li>
                <li class="page-item"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item active"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#" class="page-link">Next</a></li>
            </ul>
            <p>小分页 右对齐</p>
            <ul class="pagination pagination-sm justify-content-end">
                <li class="page-item"><a href="#" class="page-link">Previous</a></li>
                <li class="page-item"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item active"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#" class="page-link">Next</a></li>
            </ul>

            <p>面包屑导航</p>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Main</a></li>
                <li class="breadcrumb-item"><a href="#">Title</a></li>
                <li class="breadcrumb-item active">Body</li>
            </ul>
        </div>
        <p>列表</p>
        <ul class="list-group">
            <li class="list-group-item">列表1</li>
            <li class="list-group-item active">列表2激活状态</li>
            <li class="list-group-item">列表3</li>
            <li class="list-group-item disabled">列表4 禁用状态</li>
        </ul>
        <p>链接列表</p>
        <div class="col-4">
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action">apple</a>
                <a href="#" class="list-group-item list-group-item-action">banana</a>
                <a href="#" class="list-group-item list-group-item-action">origin</a>
                <a href="#" class="list-group-item list-group-item-action">purple</a>
            </div>
        </div>
        <div class="col-4">
            <div class=" list-group">
                <a href="#" class="list-group-item list-group-item-action list-group-item-primary">apple</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-info">banana</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-success">origin</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">purple</a>
            </div>
        </div>

        <p>链接列表 --无框 </p>
        <div class="col-3 list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action">apple</a>
            <a href="#" class="list-group-item list-group-item-action">banana</a>
            <a href="#" class="list-group-item list-group-item-action">origin</a>
            <a href="#" class="list-group-item list-group-item-action">purple</a>
        </div>
        <p>链接列表--水平</p>
        <div class="col-3 list-group list-group-horizontal">
            <a href="#" class="list-group-item list-group-item-action">apple</a>
            <a href="#" class="list-group-item list-group-item-action">banana</a>
            <a href="#" class="list-group-item list-group-item-action">origin</a>
            <a href="#" class="list-group-item list-group-item-action">purple</a>
        </div>


    </div>
</body>

</html>